/* 位置方案 */ 
/*
* sticky-top 存在诸多难以驾驭的问题，若想使用请再三测试，慎之又慎
* sticky-bottom 可以使用
*/
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
}


@each $conner, $real in ( l: left, t: top, r: right, b: bottom) {
    $name: absolute;
    $one: 4;
    @for $size from 0 to 11 {
        $realsize: if($size == 0, "", -#{$size});
        .#{$name}-#{$conner}#{$realsize} {
            position: #{$name};
            #{$real}: #{$size * $one}px;
        }
    }
}

@each $y, $realy in (t: top, b: bottom) {
    @each $x,$realx in (l: left, r: right) {
        $name: absolute;
        $one: 4;
        @for $size from 0 to 11 {
            $realsize: if($size == 0, "", -#{$size});
            .#{$name}-#{$y}#{$x}#{$realsize} {
                position: absolute;
                #{$realy}: #{ $size * $one }px;
                #{$realx}: #{ $size * $one }px;
            }
        }
    }
}
